<template>
	<eui-page-frame topHeight="340">
		<template #top>
			<view class="content-img" :style="[bgimage]">
					<eui-nav-bar />
			</view>
		</template>
			<eui-page-content>
				<view style="margin-bottom: 20rpx;">
					<eui-data-statistics  :dataList="dataList"></eui-data-statistics>
				</view>
				<view style="margin-bottom: 20rpx;">
					<eui-week-calendar :value="currentDay" @change="changeDate" :selectBg="selectBg" :selectShadow="selectShadow" :themeColor="themeColor" />
				</view>
				<eui-base-card> 
					<eui-tab :tabs="tabData" :spaceLeft="spaceLeft" :value="tabIndex" :showBadge="true"
						@change="tabChange" :showBorderBottom="true" :tabStyle="tabStyle"></eui-tab>
					<!-- <view style="border-bottom: 1px solid rgb(239, 239, 239);"></view> -->
				    <eui-virtual-list v-if="details.length>0"  :origList="details" :options="options" type="list3" @itemClick="openDetail" />
					<view v-else>
						<image src="@/static/img/no_data.png" mode="aspectFit" class="image-min" />
						<view class="no-data-text">暂无数据</view>
					</view>
				</eui-base-card>	
			</eui-page-content>
	</eui-page-frame>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { onLoad } from "@dcloudio/uni-app";
	import { useMainStore } from '../../../store/modules/store';
	import  useService from '@/hooks/useService';
	import dayjs from 'dayjs';
	import { storeToRefs } from 'pinia';
	import { useThemeStore } from '@/store/themeStore';
	const themeStore = useThemeStore(); // 主题
	const { theme } = storeToRefs(themeStore);
	const bgimage = ref(theme._object.theme=='theme-blue'?"background-image: url(../../../static/img/rdsImgs/top_xsbl_blue.jpg);":'background-image: url(../../../static/img/rdsImgs/top_xsbl_orange.jpg);');
	const tabStyle = ref({ justifyContent: 'space-evenly'});
	
	const service = useService({ prefix: "apiApi" });
	const mainStore = useMainStore();
	const currentDay = ref(dayjs(new Date()).format('YYYY-MM-DD'));
	const tabData = ref([{name:'全部',corner:0}, {name:'已补录',corner:0}, {name:'未补录',corner:0}, {name:'异常',corner:0}]);
	const tabIndex = ref(0);
	const themeColor = ref(theme._object.theme=='theme-blue'?'rgb(2, 183, 230)':'#FF6430')
	const selectBg= ref(theme._object.theme=='theme-blue'?"linear-gradient( 135deg, #02B7E6 0%, #36A9F3 100%)":'linear-gradient( 135deg, #FF8359 0%, #FF6430 100%)')
	const selectShadow=ref(theme._object.theme=='theme-blue'?"0rpx 0rpx 20rpx 0rpx rgba(2,183,230,0.2)":"0rpx 0rpx 20rpx 0rpx rgba(255, 100, 48, 0.2)")
	const spaceLeft = ref(0);
	const allDetail = ref([]);
	const details = ref([])
	const options = ref({
	    leftParam: 'name', 
	    centerParam: 'price', 
	    rightParam: 'status', 
	    rightParamColor: 'statusColor'
	  });
	const dataList = ref([{
			mode: 'large',
			isTop:true,
			title: '今日销售补录',
			value: 0.00,
			colSpan: 15,
			valueUnit: '',
			icon: '',
			iconColor: '',
			titleStyle: { color: '#888888', fontSize: '14px' },
			largeValueStyle: { color: themeColor.value, fontWeight: 600 },
			smallValueStyle: { color: themeColor.value, fontWeight: 600 }
		},
		{
			mode: 'large',
			isTop:true,
			title: '录入完成比例',
			value: 0.00,
			colSpan: 9,
			valueUnit: '%',
			icon: '',
			iconColor: '',
			titleStyle: { color: '#888888', fontSize: '14px' },
			largeValueStyle: { color: '#FF9400', fontWeight: 600 },
			smallValueStyle: { color: '#FF9400', fontWeight: 600 },
			unitStyle: { color: '#FF9400', fontWeight: 600 }
		}
	]);
	onLoad(async() => {
	  await getSalesRecordData();
	})

	const changeDate = async (e)=>{
		currentDay.value=e;
		await getSalesRecordData();
		
	}
	const tabChange = (e) => {
	  tabIndex.value = e;
	  details.value = e===0?allDetail.value: allDetail.value.filter(x=>x.status===tabData.value[e].name);
	}
	//获取每日补录数据
	const getSalesRecordData = async()=>{
		dataList.value = [{
			mode: 'large',
			isTop:true,
			title: '今日销售补录',
			value: 0.00,
			colSpan: 15,
			valueUnit: '',
			icon: '',
			iconColor: '',
			titleStyle: { color: '#888888', fontSize: '14px' },
			largeValueStyle: { color: themeColor.value, fontWeight: 600 },
			smallValueStyle: { color: themeColor.value, fontWeight: 600 }
		},
		{
			mode: 'large',
			isTop:true,
			title: '录入完成比例',
			value: 0.00,
			colSpan: 9,
			valueUnit: '%',
			icon: '',
			iconColor: '',
			titleStyle: { color: '#888888', fontSize: '14px' },
			largeValueStyle: { color: '#FF9400', fontWeight: 600 },
			smallValueStyle: { color: '#FF9400', fontWeight: 600 },
			unitStyle: { color: '#FF9400', fontWeight: 600 }
		}
	];
		allDetail.value=[];
		details.value=[];
		console.log('mainStore',mainStore)
		 const req = {
			 WhereList :[
			            { c_col: "c_date", c_oper: "等于", c_value: currentDay.value, c_logic: "而且" },
						// { c_col: "c_userno", c_oper: "等于", c_value: mainStore.loginInfo.sUser, c_logic: "而且" },
			        ]
		 }
		 uni.showLoading({ title: "查询中...", mask: true});
		 const res = await service.request('管易通销售补录单', 'GetMobileSalesRecodData', req);
		 uni.hideLoading();
		 if(res){
			 tabData.value = tabData.value.map(x=>{
				return {
					name:x.name,
					corner:x.name==='全部'? res.length: res.filter(y=>y.c_status===x.name).length
				}
			})
			const set = new Set(res.map(x=>x.c_con_no));
			const finishSet = new Set(res.filter(x=>x.c_status!=='未补录').map(x=>x.c_con_no))
			const todaySumValue =res.filter(x=>x.c_status!=='未补录').reduce((item, obj) => (item += obj.c_sum_value), 0.00); 
			const finishRate = set.size===0?0:finishSet.size/set.size*100;
			dataList.value = [{
						mode: 'large',
						isTop:true,
						title: '今日销售补录',
						value: todaySumValue.toFixed(2),
						colSpan: 15,
						valueUnit: '',
						icon: '',
						iconColor: '',
						titleStyle: { color: '#888888', fontSize: '14px' },
						largeValueStyle: { color: themeColor.value, fontWeight: 600 },
						smallValueStyle: { color: themeColor.value, fontWeight: 600 }
					},
					{
						mode: 'large',
						isTop:true,
						title: '录入完成比例',
						value:  finishRate.toFixed(2),
						colSpan: 9,
						valueUnit: '%',
						icon: '',
						iconColor: '',
						titleStyle: { color: '#888888', fontSize: '14px' },
						largeValueStyle: { color: '#FF9400', fontWeight: 600 },
						smallValueStyle: { color: '#FF9400', fontWeight: 600 },
						unitStyle: { color: '#FF9400', fontWeight: 600 }
					}
				];
			allDetail.value = res.map(x=>{
				return {
					name:'['+x.c_con_no+']'+' '+(x.c_name||''),
					c_con_no:x.c_con_no,
					c_bcode:x.c_counter_bcode,
					c_bname:x.c_name||'',
					price:x.c_sum_value?.toFixed(2),
					status:x.c_status,
					statusColor:x.c_status==='未补录'?'#FF7E00':x.c_status==='异常'?'#F95C19':''
				}
			});
			//console.log('11111111111',allDetail.value)
			 details.value =tabIndex.value===0?allDetail.value:allDetail.value.filter(x=>x.status===tabData.value[tabIndex.value].name);
		 }
	}
	const openDetail = (item)=>{
		console.log('openDetail',item);
		 uni.navigateTo({
		                url: `./detail?c_date=${currentDay.value}&c_con_no=${item.item.c_con_no}&c_bname=${item.item.c_bname??item.item.c_bcode}`
		            });
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex: 1;
		flex-direction: column;

		background-color: #F2F2F2;
		padding: 0px !important
	}

	.content-img {
		background-image: url(../../../static/img/rdsImgs/top_xsbl_blue.jpg);
		background-size: 100% 420rpx;
		background-repeat: no-repeat;
		width: 100%;
		height: 420rpx;
	}

	.card {
		border-radius: 16rpx;
		//margin: 0px 10px 10px 10px;
		background-color: #ffffff;
	}
	.image-min {
		width: 100%;
		height: 150rpx;
		opacity: 0.6;
		margin-top:-20rpx;
	}
	::v-deep .list_cell3{
		padding-left:24rpx;
	}
	::v-deep .e-card{
	  margin-left: 0rpx !important; 
	  margin-right: 0rpx !important;
	}
	::v-deep .e-card__content{
		 margin-left: 0rpx !important;
		 margin-right: 0rpx !important;
		 margin-bottom:0rpx !important;
	}
	.no-data-text{
		text-align: center;
		color: #cccccc;
		font-size:24rpx;
		margin-top:-20rpx;
		margin-bottom:10rpx;
	}
	::v-deep .e-card__body{
		margin-left:0rpx !important;
	}
	::v-deep .rds-tabs{
		border-radius:  20rpx 20rpx 0 0 !important;
	}
	.list_cell3:last-child{
		border-radius: 0rpx 0rpx 20rpx 20rpx;
	}
</style>